<template>
  <li v-for="item of props.data" :key="item.id">
    <p>{{ item.username }}</p>
    <p>{{ item.comment }}</p>
    <a href="javascript:;" @click="setReplyFlag(item)">Reply</a>
    <div v-if="item.isReply">
      <p>
        <textarea v-model="item.replyText"></textarea>
      </p>
      <p>
        <button @click="addReply(item)">Submit</button>
      </p>
    </div>
    <div v-if="item.children">
      <ul>
        <comment-comp
          :data="item.children"
          :user-info="props.userInfo"
          @add-reply="addReply"
        ></comment-comp>
      </ul>
    </div>
  </li>
</template>

<script setup>
const props = defineProps({
  data: Array,
  userInfo: Object
});
const emit = defineEmits(['addReply']);

const setReplyFlag = (item) => {
  item.isReply = !item.isReply;
};

const addReply = (item) => {
  const replyText = item.replyText;
  emit('addReply', item, replyText, props.userInfo);
  item.isReply = false;
  item.replyText = '';
  /**
   console.log(item, replyText);
   * {
   *   comment: "333",
   *   id: 1668931705361,
   *   isReply: false,
   *   pid: 0,
   *   replyText: "",
   *   uid: 3,
   *   username: 'Methow'
   * }
   */
};
</script>
